<template>
  <div>
    <h2>其他质量统计</h2>
    <div class="chart">
      <!-- 图表 -->
      <div ref="social" style="width: 100%; height: 100%" />
    </div>
    <div class="chart">
      <!-- 图表 -->
      <div ref="circle" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getLine();
    this.getCircle()
  },
  methods: {
    getLine() {
      this.social = echarts.init(this.$refs.social);
      // 设置图表
      this.social.setOption({
        // 图表标题
        title: {
          text: "数量统计",
          left: "center",
        },
        // 图例颜色，需要和legend.data对应
        color: ["#04c9be"],
        legend: {
          data: ["数量"],
          left: "60%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2023/11/1",
            "2023/11/2",
            "2023/11/3",
            "2023/11/4",
            "2023/11/5",
            "2023/11/6",
            "2023/11/7",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            // 与标题一致
            name: "数量",
            data: [500, 165, 23, 787, 526, 734, 172],
            type: "line",
            areaStyle: {
              color: "#04c9be", // 填充颜色
            },
            lineStyle: {
              color: "#04c9be", // 线的颜色
            },
          },
        ],
      });
    },
    getCircle() {
      this.circle = echarts.init(this.$refs.circle);
      this.circle.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        // 图表标题
        title: {
          text: "其他质量占比",
          left: "center",
        },
        series: [
          {
            // name: "蜡脏质量占比",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "质量总数" },
              { value: 300, name: "其他总数" },
              
            ],
          },
        ],
      });
    },
  },
  components: {},
  props: {},
  watch: {},
  computed: {},
  created() {},
};
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>
